<template>
	<div id="top">
		<!-- 侧边栏 -->
		<div class="sidebar" @click="show">
			<el-menu :default-active="path" router unique-opened style="border: none;" background-color="#324157" text-color="#BFCBD9"
			 class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
				<el-menu-item index="/dashboard">
					<i class="el-icon-s-home"></i>
					<span slot="title">{{label}}</span>
				</el-menu-item>
				<el-submenu v-for="(item,index) in sidebars" :key="item.oid" :index="item.url">
					<template slot="title">
						<i :class="item.icon"></i>
						<span slot="title">{{item.name}}</span>
					</template>
					<el-menu-item v-for="(items,indexs) in item.Subpage" :key="items.oid" :index="items.url">{{items.name}}</el-menu-item>
				</el-submenu>
			</el-menu>
		</div>
		<!-- 主页面 -->
		<div class="Mainpage">
			<!-- 顶部导航栏 -->
			<div class="Top_noe">
				<div class="Top_to" @click="show">
					<div class="left_noe">
						<div class="dhua" @click="isCollapse = !isCollapse" :class="isCollapse == false ? '':'dhua_ton'">
							<span class="Icon_noe">
								<span class="el-icon-s-fold"></span>
							</span>
						</div>
						<div class="crumbs">
							<el-breadcrumb separator-class="el-icon-arrow-right" style="overflow: hidden;width: 250px;">
								<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
								<el-breadcrumb-item v-for="(item,index) in Operation">{{item}}</el-breadcrumb-item>
							</el-breadcrumb>
						</div>
					</div>
					<div class="right_noe">
						<div class="btn-fullscreen" @click="handleFullScreen">
							<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
								<img style="width: 35px; height: 35px; margin-left: -15px; margin-top: -8px;" src="../../assets/home/Fullscreen.png" />
							</el-tooltip>
						</div>

						<div class="Switch">
							<div class="colour">
								<div class="block">
									<!-- <span class="demonstration">有默认值</span> -->
									<el-tooltip class="item1" effect="dark" content="换肤" placement="bottom">
										<Color></Color>
									</el-tooltip>
								</div>
							</div>
						</div>
						<!-- 中英文切换 -->
						<el-dropdown trigger="click">
							<el-tooltip style="margin-left: 15px;" class="item" effect="dark" :content="LanguageSwitching == true ? 'Turn to Chinese' : '翻成英文'"
							 placement="bottom">
								<div style="width: 60px; height: 30px; margin-right: 10px;">
									<img src="../../assets/home/Chinese.png" v-show="LanguageSwitching" class="imgs" />
									<img src="../../assets/home/English.png" v-show="!LanguageSwitching" class="imgs" />
								</div>
							</el-tooltip>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="true"><span @click="switchLang">中文</span></el-dropdown-item>
								<el-dropdown-item command="false"><span @click="switchLang">English</span></el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<!-- 用户头像 -->
						<el-dropdown trigger="click" @command="user" style="margin-left: 15px;">
							<div style="width: 56px; height: 36px; margin-right: 10px;">
								<el-avatar shape="square" size="medium"> user </el-avatar>
								<i class="el-icon-arrow-down el-icon--right"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="1">{{label}}</el-dropdown-item>
								<el-dropdown-item command="2">{{labes}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<!-- 动态路由样式 -->
				<div class="Top_three">
					<Dynamic :message="arrlist" ref="child" sttyle="z-index: 99999;"></Dynamic>
				</div>
			</div>
			<div class="Rendering" @click="show">
				<router-view></router-view>
			</div>
			<!-- 回到顶部 -->
			<el-backtop target=".Rendering" :visibility-height="20" :bottom="100" :right="40" style="z-index: 99;">
				<div class="el-icon-s-home" style="{
						        height: 100%;
						        width: 100%;
						        background-color: #f2f5f6;
						        box-shadow: 0 0 6px rgba(0,0,0, .12);
						        text-align: center;
						        line-height: 40px;
						        color: #1989fa;
								font-size: 30px;
						      }">
				</div>
			</el-backtop>
		</div>
	</div>
</template>

<script>
	// <!-- 动态路由样式 -->
	import Dynamic from '../../components/zizhujian/zizhujian.vue'
	import Cookies from 'js-cookie'
	import {
		Logout
	} from '../../api/Login.js'
	import Color from '../../assembly/Color.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				isCollapse: false,
				LanguageSwitching: true, // 中英文切换
				path: '',
				Operation: [],
				arrlist: [],
				colour: '#409EFF',
				fullscreen: false,
				home: '首页',
				sidebars: [{
						oid: '1',
						name: this.$t('message.operations'),
						url: '2',
						icon: 'el-icon-s-data',
						Subpage: [{
								oid: '1-1',
								name: this.$t('message.order'),
								url: '/operate/ordermanage'
							},
							{
								oid: '1-2',
								name: this.$t('message.comment'),
								url: '/operate/commentmanage'
							},
							{
								oid: '1-3',
								name: this.$t('message.freight'),
								url: '/operate/freightmanage'
							}
						]
					},
					{
						oid: '2',
						name: this.$t('message.commodity'),
						url: '3',
						icon: 'el-icon-s-shop',
						Subpage: [{
								oid: '2-1',
								name: this.$t('message.management'),
								url: '/goods/goodslist'
							},
							{
								oid: '2-2',
								name: this.$t('message.classify'),
								url: '/goods/goodscategory'
							}
						]
					},
					{
						oid: '3',
						name: this.$t('message.promotion'),
						url: '4',
						icon: 'el-icon-s-finance',
						Subpage: [{
								oid: '3-1',
								name: this.$t('message.shop'),
								url: '/promotion/shopadvert'
							},
							{
								oid: '3-2',
								name: this.$t('message.recommend'),
								url: '/promotion/recommanage'
							},
							{
								oid: '3-3',
								name: this.$t('message.discounts'),
								url: '/promotion/couponmanage'
							},
							{
								oid: '3-4',
								name: this.$t('message.shopmessage'),
								url: '/promotion/shopsmanage'
							}
						]
					},
					{
						oid: '4',
						name: this.$t('message.system'),
						url: '5',
						icon: 'el-icon-s-tools',
						Subpage: [{
								oid: '4-1',
								name: this.$t('message.member'),
								url: '/system/usermanage'
							},
							{
								oid: '4-2',
								name: this.$t('message.Administrator'),
								url: '/system/adminlist'
							},
							{
								uid: '4-3',
								name: this.$t('message.role'),
								url: '/system/rolemanage'
							}
						]
					}
				]

			}
		},
		created() {
			this.onRouteChanged()
		},
		computed: {
			...mapState(['lang']),
			label() {
				return this.$t('message.homepage')
				// console.log(this.$t('message.homepage'),"asdqwe")
			},
			labes(){
				return this.$t('message.dropout')
			}
		},
		methods: {
			// 中英文切换
			switchLang(command) {
				this.LanguageSwitching = !this.LanguageSwitching
				let lang = ''
				if (this.lang === 'en') {
					lang = 'cn'
				} else {
					lang = 'en'
				}
				this.$store.commit('switchLang', lang)
				console.log("111111111")
				this.sidebars = [
					{
						oid: '1',
						name: this.$t('message.operations'),
						url: '2',
						icon: 'el-icon-s-data',
						Subpage: [{
								oid: '1-1',
								name: this.$t('message.order'),
								url: '/operate/ordermanage'
							},
							{
								oid: '1-2',
								name: this.$t('message.comment'),
								url: '/operate/commentmanage'
							},
							{
								oid: '1-3',
								name: this.$t('message.freight'),
								url: '/operate/freightmanage'
							}
						]
					},
					{
						oid: '2',
						name: this.$t('message.commodity'),
						url: '3',
						icon: 'el-icon-s-shop',
						Subpage: [{
								oid: '2-1',
								name: this.$t('message.management'),
								url: '/goods/goodslist'
							},
							{
								oid: '2-2',
								name: this.$t('message.classify'),
								url: '/goods/goodscategory'
							}
						]
					},
					{
						oid: '3',
						name: this.$t('message.promotion'),
						url: '4',
						icon: 'el-icon-s-finance',
						Subpage: [{
								oid: '3-1',
								name: this.$t('message.shop'),
								url: '/promotion/shopadvert'
							},
							{
								oid: '3-2',
								name: this.$t('message.recommend'),
								url: '/promotion/recommanage'
							},
							{
								oid: '3-3',
								name: this.$t('message.discounts'),
								url: '/promotion/couponmanage'
							},
							{
								oid: '3-4',
								name: this.$t('message.shopmessage'),
								url: '/promotion/shopsmanage'
							}
						]
					},
					{
						oid: '4',
						name: this.$t('message.system'),
						url: '5',
						icon: 'el-icon-s-tools',
						Subpage: [{
								oid: '4-1',
								name: this.$t('message.member'),
								url: '/system/usermanage'
							},
							{
								oid: '4-2',
								name: this.$t('message.Administrator'),
								url: '/system/adminlist'
							},
							{
								uid: '4-3',
								name: this.$t('message.role'),
								url: '/system/rolemanage'
							}
						]
					}
				]
			},
			// 全屏
			handleFullScreen() {
				const element = document.documentElement
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen()
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen()
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen()
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen()
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen()
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen()
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen()
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen()
					}
				}
				this.fullscreen = !this.fullscreen
			},
			getKeyDown(event) {
				const _this = this
				if (event.keyCode === 122) {
					event.preventDefault() || (event.returnValue = false)
					_this.screen() // 触发全屏的按钮
				} else if (event.keyCode === 27) {
					if (document.fullscreenElement !== null) {
						_this.screen()
					}
				}
			},

			handleOpen(key, keyPath) {
				console.log(key, keyPath)
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath)
			},
			// 回到首页、登出
			user(index) {
				if (index == 1) {
					this.$router.push('/dashboard')
				} else {
					this.$confirm('退出登入?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						Logout().then((resspose) => {
							console.log(resspose)
							if (resspose.data.errno == 200) {
								Cookies.remove('AdminToken')
								localStorage.removeItem("lang")
								this.$message({
									type: 'success',
									message: '退出成功'
								})
								this.$router.push('/About')
							} else {
								if (resspose.data.errno == 10006) {
									this.$router.push('/About')
								}
								this.$message.error(resspose.data.errmsg)
							}
						})
					})
				}
			},
			onRouteChanged() {
				this.path = this.$route.path
				if (this.$route.name == '首页') {
					this.Operation = []
				} else {
					for (let i = 0; i < this.$route.matched.length; i++) {
						this.Operation[i] = this.$route.matched[i].name
					}
					// console.log(111)
				}
				// 自定义组件数组
				let num = true
				for (let i = 0; i < this.arrlist.length; i++) {
					if (this.arrlist[i].name == this.$route.name || this.$route.path == '/Refresh') {
						num = false
					}
				}
				if (num) {
					this.arrlist.push({
						name: this.$route.name,
						url: this.$route.path
					})
				}
			},
			// 关闭自定义组件弹框
			show() {
				this.$refs.child.parentMsg()
			}
		},
		watch: {
			// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
			$route: 'onRouteChanged',
		},
		components: {
			Dynamic,
			Color
		},
		mounted() {
			window.addEventListener('keydown', this.getKeyDown)
		}
	}
</script>

<style scoped="scoped" lang="less">
	#top {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
	}

	// 侧边栏
	.sidebar {
		padding: 0px;
		margin: 0px;
		height: 100%;
		overflow: hidden;
		// flex-grow: 1;
		flex-shrink: 0;
	}

	.el-menu {
		height: 100%;
		background-color: #324157;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}

	// 顶部导航栏
	.Mainpage {
		width: 100%;
		height: 100%;
		// flex-grow: 2;
		// flex-grow: 2;
		// flex-shrink: 1;
	}

	.Top_noe {
		width: 100%;
		height: 11vh;
	}

	.Top_to {
		width: 100%;
		height: 6.5vh;
		border-bottom: 1px solid #DCDFE6;
		display: flex;
		align-items: center;
	}

	// left
	.left_noe {
		width: 50%;
		height: 6vh;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	// 面包屑的样式
	.crumbs {
		overflow: hidden;
		margin-left: 20px;
	}

	.dhua {
		width: 27px;
		height: 25px;
		transition-duration: 0.5s;
		display: flex;
		align-items: center;
	}

	.dhua_ton {
		transform: rotate(180deg);
	}

	.Icon_noe {
		display: inline-block;
		font-size: 25px;
	}

	// right
	.right_noe {
		width: 50%;
		height: 6px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.Fullscreen {
		width: 50px;
		height: 50px;
		display: flex;

		.item {
			width: 45px;
			height: 45px;
			margin-left: 7px;
			border: none;
		}
	}

	.Switch {
		width: 53px;
		height: 55px;
		margin-left: 15px;
	}

	.colour {
		width: 53px;
		height: 52px;
		display: flex;
		justify-content: center;
		align-items: center;

		.item {
			width: 35px;
			height: 40px;
			background-color: #3A9EFE;
		}
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.demonstration {
		display: block;
		color: #8492a6;
		font-size: 14px;
		margin-bottom: 20px;
	}

	.imgs {
		width: 60px;
		height: auto;
		position: relative;
		top: -15px;
	}

	// 动态路由样式
	.Top_three {
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #E6E6E6;
		display: flex;
		align-items: center;
	}

	.Rendering {
		width: 99%;
		height: 89vh;
		overflow: auto;
		margin-top: 10px;
		// background-color: #3344BB;
		// display: -webkit-box;
		// padding:10px 10px
		// justify-content: center;
		// overflow-x: hidden;
		// Firefox浏览器，将滚动条宽度设为none
		// scrollbar-width: none;
		// IE浏览器，使用-ms-prefix属性定义滚动条样式
		// -ms-overflow-style: none;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
	}

	// Chrome和Safari浏览器，CSS滚动条选择器
	.Rendering::-webkit-scrollbar {
		display: none;
	}

	.el-icon-s-fold {
		cursor: pointer;
	}

	.btn-fullscreen {
		cursor: pointer;
	}
</style>
